<template>
  <div class="air">
    <div class="title">空气质量</div>
    <div class="top">
      <div class="data">{{ air.aqi }}</div>
      <div class="word">{{ air.word }}</div>
    </div>
    <div class="bottom">
      <el-row>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.pm25" text="PM2.5" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.pm10" text="PM10" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.o3" text="O3" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.co" text="CO" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.so2" text="SO2" />
        </el-col>
        <el-col :xs="8" :sm="8" :md="4" :lg="4" :xl="4">
          <AirContent :data="air.no2" text="NO2" />
        </el-col>
      </el-row>
    </div>
    <div class="more" @click="jump">预报和更多</div>
  </div>
</template>

<script setup>
import AirContent from "@/components/main/air-content.vue";
import { useRouter } from "vue-router";

const props = defineProps({
  air: {
    type: Object,
  },
});

const router = useRouter();
const jump = () => {
  router.push({
    path: "/air",
  });
};
</script>

<style lang="less" scoped>
.air {
  padding: 30px 0 14px;
  margin-bottom: 16px;

  border-radius: 16px;
  background-color: #f7f8f9;
  border: 1px solid #f2f4fa;
  .title {
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    margin-bottom: 28px;
  }
  .top {
    padding: 15px 0 15px;
    text-align: center;
    .data {
      font-size: 30px;
      font-weight: 700;
    }
    .word {
      margin-top: 7px;
      font-size: 18px;
    }
  }
  .bottom {
    margin: auto;
    max-width: 768px;
  }
  .more {
    padding-top: 5px;
    border-top: 1px solid #dedfe2;
    height: 35px;
    text-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 35px;
    color: #427bff;
  }
}
</style>